<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>图片转动</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="../jquery-1.8.3.js"></script>
<style type="text/css">
    /*整体部分*/
    body,div {
        font-family: "Microsoft Yahei", Helvetica, Arial, sans-serif;
        margin: 0px;
        padding: 0px;
    }

    a {
        color: #044488;
        text-decoration: none;
    }

    a:hover {
        color: red;
    }

    .show {
        width: 600px;
        border: 1px solid #CCCCCC;
        margin: 20px auto;
    }

    /*导航*/
    .caption {
        height: 35px;
        background: #CCCCCC;
        padding: 5px;
    }

    .caption h2 {
        margin: 0px;
        display: inline;
        float: left;
    }

    .highlight_tip {
        display: inline;
        float: left;
        margin: 14px 0 0 10px;
    }

    .highlight_tip span {
        display: inline;
        float: left;
        width: 7px;
        height: 7px;
        overflow: hidden;
        margin: 0 2px;
        background: url(img/btn_cartoon.gif) no-repeat 0 -320px;
        text-indent: -9999px;
    }

    .highlight_tip .current {
        background-position: 0 -220px;
    }

    .change_btn {
        float: left;
        margin: 7px 0 0 10px;
    }

    .change_btn span {
        display: block;
        float: left;
        width: 30px;
        height: 23px;
        overflow: hidden;
        background: url(img/btn_cartoon.gif) no-repeat;
        text-indent: -9999px;
        cursor: pointer;
    }

    .change_btn .prev {
        background-position: 0 -400px;
    }

    .change_btn .next {
        width: 31px;
        background-position: -30px -400px;
    }

    .caption em {
        display: inline;
        float: right;
        margin: 5px 12px 0 0;
    }

    /*内容*/
    .content {
        position: relative;
        width: 600px;
        height: 150px;
        overflow: hidden;
    }

    .content_list {
        position: absolute;
        width: 2500px;
        left: 0px;
    }

    .content ul {
        margin: 0px;
        padding: 0px;
    }

    .content ul li {
        display: inline;
        float: left;
        margin: 10px 2px 0;
        padding: 8px 9px;
    }

    .content ul li a {
        display: block;
        width: 128px;
        overflow: hidden;
    }

    .content ul li img {
        width: 130px;
        height: 100px;
    }
</style>
<script type="text/javascript">
$(function() {
    var page = 1;
    var page_size = 4;
    var content = $('.content');
    var list = $('.content_list');
    var width = content.width();

    var length = list.find('li').length;
    var page_count = Math.ceil(length / page_size);

    // console.log('length = ' + length);
    // console.log('page_size = ' + page_size);
    // console.log('page_count = ' + page_count);

    $('.next').click(next = function() {

        if (!list.is(':animated')) {
            if (page == page_count) {
                list.animate({left : '0px'}, 1000);
                page = 1;
            } else {
                list.animate({left : '-='+width}, 1000);
                page++;
            }
        }

        $(this).parents('.caption').find('span').eq((page-1))
        .addClass('current').siblings()
        .removeClass('current');
    })

    $('.prev').click(function() {
        if(!list.is(':animated')) {
            if (page == 1) {
                list.animate({left : '-='+width*(page_count-1) }, 'slow');
                page = page_count;
            } else {
                list.animate({left : '+='+width}, 'slow');
                page--;
            }
        }

        $(this).parents('.caption').find('span').eq((page-1))
        .addClass('current').siblings()
        .removeClass('current');
    })

    self.setInterval('next()', 3000);

})
</script>
</head>
<body>
<div class="show">
    <div class="caption">
        <h2 class="cartoon" title="卡通动漫">卡通动漫</h2>
        <div class="highlight_tip">
            <span class="current">1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
        </div>
        <div class="change_btn">
            <span class="prev" >上一页</span>
            <span class="next">下一页</span>
        </div>
        <em><a href="#">更多>></a></em>
    </div>
    <div class="content">
        <div class="content_list">
            <ul>
                <li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><a href="#">海贼王</a></li>
                <li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><a href="#">海贼王</a></li>
                <li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><a href="#">海贼王</a></li>
                <li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><a href="#">海贼王</a></li>
                <li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><a href="#">哆啦A梦</a></li>
                <li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><a href="#">哆啦A梦</a></li>
                <li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><a href="#">哆啦A梦</a></li>
                <li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><a href="#">哆啦A梦</a></li>
                <li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><a href="#">火影忍者</a></li>
                <li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><a href="#">火影忍者</a></li>
                <li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><a href="#">火影忍者</a></li>
                <li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><a href="#">火影忍者</a></li>
                <li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><a href="#">龙珠</a></li>
                <li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><a href="#">龙珠</a></li>
                <li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><a href="#">龙珠</a></li>
                <li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><a href="#">龙珠</a></li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>
